<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 按钮 -->
        <el-row>
          <div>
            <el-button type="primary" round @click="addPremissionBtn(1,'0','add')">新增</el-button>
            <el-button type="primary" round @click="test">测试动态添加路由</el-button>
          </div>
        </el-row>
      </el-card>
      <!-- 弹出框 -->
      <div>
        <el-dialog
          :title="isEdit ? '编辑权限' : '新增权限'"
          :visible.sync="dialogVisible"
          width="40%"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          @close="closeDialog"
        >
          <!-- 弹出框表单 -->
          <div>
            <el-form ref="formRef" :model="form" label-width="80px">
              <el-form-item label="权限名称">
                <el-input v-model="form.name" placeholder="添加" />
              </el-form-item>
              <el-form-item label="权限标识">
                <el-input v-model="form.code" placeholder="add" />
              </el-form-item>
              <el-form-item label="权限描述">
                <el-input v-model="form.description" placeholder="添加功能" />
              </el-form-item>
              <el-form-item label="权限启用">
                <el-switch
                  v-model="form.enVisible"
                  active-value="1"
                  active-text="启用"
                  inactive-value="2"
                  inactive-text="不启用"
                />
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit">{{ isEdit ? '更新' : '新增' }}</el-button>
          </span>
        </el-dialog>
      </div>
      <!-- 表单 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        row-key="id"
      >
        <el-table-column
          prop="name"
          label="名字"
          width="180"
        />
        <el-table-column
          prop="code"
          label="标识"
          width="180"
        />
        <el-table-column
          prop="description"
          label="描述"
        />
        <el-table-column label="操作" width="300" fixed="right">
          <template slot-scope="scope">
            <el-button v-if="(scope.row.type===1)" type="primary" round @click="addPremissionBtn(2, scope.row.id)">添加</el-button>
            <el-button type="success" round @click="editPremissionBtn(scope.row.id,'edit')">编辑</el-button>
            <el-button v-if="scope.row.children.length === 0" type="danger" round @click="delPremissionBtn(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getAllPremissionRequest, addPremissionRequest, deletePremissionByIdRequest, getPremissionByIdRequest, updatePremissionByIdRequest } from '@/api/permissions'
import { tranListToTreeData } from '@/utils/index'
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      form: {
        name: '',
        code: '',
        description: '',
        enVisible: '',
        pid: '',
        type: 0
      },
      isEdit: false
    }
  },
  created() {
    this.getAllPremissionById()
  },
  methods: {
    // 测试js添加路由
    test() {
      // 在代码里面通过点击，使用js动态添加理由 --- addRoutes
      // this.$router.addRoutes({
      //   path: '/demo',
      //   component: () => import('@/views/demo.vue')
      // })
      this.$router.addRoutes([
        {
          path: '/demo',
          component: () => import('@/views/demo.vue')
        },
        {
          path: '/test',
          component: () => import('@/views/demo.vue')
        }
      ])
    },
    // 获得全部权限的异步请求，渲染列表
    async getAllPremissionById() {
      try {
        const res = await getAllPremissionRequest()
        if (res.success) {
          console.log('getAllPremissionRequest: ', res)
          // this.tableData = res.data
          // 因为表格里面需要渲染 树形结构，需要将平铺数据转换为树形结构，带有children的书写，才能出现折叠按钮
          this.tableData = tranListToTreeData(res.data, '0')
        } else {
          this.$message('数据获得失败')
        }
      } catch (err) {
        console.log('getAllPremissionRequest: ', err)
      }
    },
    // 点击新增
    addPremissionBtn(type, pid) {
      this.isEdit = false
      // console.log(111)
      this.dialogVisible = true
      this.form.type = type
      this.form.pid = pid
    },
    // 新增的异步请求
    async addPremission() {
      try {
        const res = await addPremissionRequest(this.form)
        if (res.success) {
          this.dialogVisible = false
          this.getAllPremissionById()
          console.log('addPremissionRequest: ', res)
        } else {
          this.$message('添加失败')
        }
      } catch (err) {
        console.log('addPremissionRequest: ', err)
      }
    },
    // 点击确认
    onSubmit() {
      if (!this.isEdit) {
        this.addPremission()
      } else {
        this.updatePremissionById()
      }
    },
    // 删除的异步请求
    async deletePremissionById(id) {
      try {
        const res = await deletePremissionByIdRequest(id)
        if (res.success) {
          console.log('deletePremissionByIdRequest: ', res)
          this.getAllPremissionById()
        } else {
          this.$message.error('删除权限失败')
        }
      } catch (err) {
        console.log('deletePremissionByIdRequest: ', err)
      }
    },
    // 点击删除
    delPremissionBtn(id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deletePremissionById(id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击编辑
    editPremissionBtn(id) {
      this.isEdit = true
      this.getPremissionById(id)
    },
    // 点击编辑获得数据的异步请求
    async getPremissionById(id) {
      try {
        const res = await getPremissionByIdRequest(id)
        if (res.success) {
          this.dialogVisible = true
          this.form = res.data
          console.log('getPremissionByIdRequest: ', res)
        } else {
          this.$message('根据ID获取数据失败')
        }
      } catch (err) {
        console.log('getPremissionByIdRequest: ', err)
      }
    },
    // 关闭的监听回调
    closeDialog() {
      // 重置表单校验
      this.$refs.formRef.resetFields()
      // 数据初始化
      this.form = this.$options.data()
    },
    // 编辑后更新的异步请求
    async updatePremissionById() {
      try {
        const res = await updatePremissionByIdRequest(this.form)
        if (res.success) {
          console.log('updatePremissionByIdRequest: ', res)
          this.dialogVisible = false
          this.getAllPremissionById()
        } else {
          this.$message('更新失败')
        }
      } catch (err) {
        console.log('updatePremissionByIdRequest: ', err)
      }
    }
  }
}
</script>
